<template>
  <div class="animate__animated animate__fadeInLeft">
    <el-row :gutter="15">
      <el-col :span="7"
        ><div class="left_one grid-content">
          <user-info /></div
      ></el-col>
      <el-col :span="17"
        ><div class="right_one grid-content">
          <div id="chart3" style="width: 30%; height: 320px"></div>
          <el-calendar v-model="value" style="width: 60%; height: 300px">
          </el-calendar></div
      ></el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="8"
        ><div class="grid-content left_two">
          <div id="chart" style="width: 100%; height: 250px"></div>
        </div>
      </el-col>
      <el-col :span="8"
        ><div class="grid-content middle_two">
          <div id="chart1" style="height: 250px; width: 100%"></div></div
      ></el-col>
      <el-col :span="8">
        <div class="grid-content right_two">
          <div id="chart2" style="height: 250px; width: 100%"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import UserInfo from "../userInfo/UserInfo.vue";
// import { userInfo } from "@/views/userInfo/userInfo.vue";
// import userInfo from "../userInfo/UserInfo.vue";
export default {
  components: { UserInfo },
  name: "IndexView",
  data() {
    return {
      value: new Date(),
      option: {
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
            barWidth: "20%",
          },
          {
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
      option1: {
        xAxis: {
          data: [
            "2021-01",
            "2021-02",
            "2021-03",
            "2021-04",
            "2021-05",
            "2021-06",
            "2021-07",
          ],
          boundaryGap: false, // 不留白，从原点开始
        },
        yAxis: {},
        series: [
          {
            data: [400, 370, 800, 550, 400, 180, 220],
            type: "line",
            smooth: true,
            areaStyle: {
              color: "orange",
              opacity: 0.5,
            },
          },
        ],
      },
      option2: {
        series: [
          {
            type: "pie",
            data: [
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 234,
                name: "联盟广告",
              },
              {
                value: 1548,
                name: "搜索引擎",
              },
            ],
            radius: "50%",
          },
        ],
      },
      option3: {
        title: {
          text: "9",
          left: "center",
          top: "center",
        },
        series: [
          {
            type: "pie",
            data: [
              {
                value: 60,
                name: "c",
              },
              {
                value: 160,
                name: "B",
              },
            ],
            radius: ["40%", "70%"],
          },
        ],
      },
    };
  },
  mounted() {
    let myChart = this.$echarts.init(document.getElementById("chart"));
    //设置echarts对象的option属性
    myChart.setOption(this.option);
    let myChart1 = this.$echarts.init(document.getElementById("chart1"));
    //设置echarts对象的option属性
    myChart1.setOption(this.option1);
    let myChart2 = this.$echarts.init(document.getElementById("chart2"));
    //设置echarts对象的option属性
    myChart2.setOption(this.option2);
    let myChart3 = this.$echarts.init(document.getElementById("chart3"));
    //设置echarts对象的option属性
    myChart3.setOption(this.option3);
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.el-calendar-table .el-calendar-day {
  // width: 30%;
  box-sizing: border-box;
  padding: 7px;
  height: 25px;
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-calendar__body {
  position: absolute;
  height: 300px;
}
.left_one {
  // background: red;
  box-shadow: 2px 2px 5px grey;
}
.right_one {
  display: flex;
  /* background-color: yellow; */
  box-shadow: 2px 2px 5px grey;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple-light {
  background: #e5e9f2;
  box-shadow: 2px 2px 5px grey;
}
.left_two {
  /* background-color: antiquewhite; */
  box-shadow: 2px 2px 5px grey;
}
.middle_two {
  box-shadow: 2px 2px 5px grey;
  /* background-color: blue; */
}
.right_two {
  box-shadow: 2px 2px 5px grey;
  /* background-color: pink; */
}
el-row {
  height: 50%;
}
</style>
